<template>
  <div class="tableCompare">
    <div class="box">
      <div class="left">
        <el-table :data="tableData.left"
                  ref="left"
                  height="100%">
          <el-table-column prop="name"
                           label="姓名"></el-table-column>
          <el-table-column prop="age"
                           label="年龄"></el-table-column>
          <el-table-column prop="height"
                           label="身高"></el-table-column>
          <el-table-column prop="sex"
                           label="性别"></el-table-column>
          <el-table-column prop="order"
                           label="">
            <template slot-scope="scope">
              <div style="text-align:right;">{{scope.row.order}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <el-table :data="tableData.right"
                  ref="right"
                  height="100%">
          <el-table-column prop="order"
                           label=""></el-table-column>
          <el-table-column prop="name"
                           label="姓名"></el-table-column>
          <el-table-column prop="age"
                           label="年龄"></el-table-column>
          <el-table-column prop="height"
                           label="身高"></el-table-column>
          <el-table-column prop="sex"
                           label="性别"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'tableCompare',
  data () {
    return {
      tableData: {
        left: [
          {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 1
          }, {
            name: "",
            age: "",
            height: "",
            sex: "",
            order: 2
          }, {
            name: "",
            age: "",
            height: "",
            sex: "",
            order: 3
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 4
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 5
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 6
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 7
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 8
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 9
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 10
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 11
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 12
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 13
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 14
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 15
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 16
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 17
          }, {
            name: "",
            age: "",
            height: "",
            sex: "",
            order: 18
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 19
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 20
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 21
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 22
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 23
          }, {
            name: "张三",
            age: "56",
            height: 167,
            sex: "男性",
            order: 24
          },
        ],
        right: [
          {
            order: 1,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 2,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 3,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 4,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 5,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 6,
            name: "",
            age: "",
            height: "",
            sex: ""
          }, {
            order: 7,
            name: "",
            age: "",
            height: "",
            sex: ""
          }, {
            order: 8,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 9,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 10,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 11,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 12,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 13,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 14,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 15,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 16,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 17,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 18,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 19,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 20,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 21,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 22,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 23,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }, {
            order: 24,
            name: "李四",
            age: "26",
            height: 199,
            sex: "女性"
          }
        ]
      }
    };
  },
  methods: {
    syncScroll () {
      let firstTable = this.$refs.left.bodyWrapper
      let secondTable = this.$refs.right.bodyWrapper
      //   firstTable.addEventListener("scroll", () => {
      //     secondTable.scrollTop = firstTable.scrollTop
      //   })
      secondTable.addEventListener("scroll", () => {
        firstTable.scrollTop = secondTable.scrollTop
      })
      //   firstTable.addEventListener("mousewheel", () => {
      //     secondTable.scrollTop = firstTable.scrollTop
      //   })
    }
  },
  mounted () {
    this.syncScroll()
  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.tableCompare {
  box-sizing:border-box;
  padding:10px;
  height: 100%;
  .box {
    display: flex;
    width: 100%;
    height: 100%;
    // background-color: lightGray;
    .left {
      //   margin-right: 2px;
      width: 49%;
      height: 100%;
      //   border: 1px solid red;
    }
    .right {
      width: 50%;
      height: 100%;
      //   border: 1px solid red;
    }
  }
}
</style>
<style lang="less">
.tableCompare {
  .left {
    /* 滚动条的宽度(包括横向纵向) */
    ::-webkit-scrollbar {
      width: 0px;
      height: 8px;
      cursor: pointer;
    }
    /* 滚动条的滑块 */
    ::-webkit-scrollbar-thumb {
      background-color: #a1a3a9;
      border-radius: 2px;
    }
  }
  .right {
    /* 滚动条的宽度(包括横向纵向) */
    ::-webkit-scrollbar {
      width: 10px;
      height: 8px;
      cursor: pointer;
    }
    /* 滚动条的滑块 */
    ::-webkit-scrollbar-thumb {
      background-color: #a1a3a9;
      border-radius: 2px;
    }
  }
}
</style>